<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container-md col-md-4">

    <h2 style="text-align: center; margin-bottom: 50px; margin-top: 30px">用户注册</h2>
    <div class="mb-md-4 row">
        <label for="username" class="col-md-2 col-form-label"
               style="text-align: justify;text-align-last: justify">用户名</label>
        <div class="col-md-10">
            <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名"/>
        </div>
    </div>
    <div class="mb-md-4 row">
        <label for="password" class="col-md-2 col-form-label"
               style="text-align: justify;text-align-last: justify">密码</label>
        <div class="col-md-10">
            <input type="password" id="password" name="password" class="form-control" placeholder="输入密码"/>
        </div>
    </div>
    <div class="mb-md-4 row">
        <label for="confirmPassword" class="col-md-2 col-form-label"
               style="text-align: justify;text-align-last: justify">确认密码</label>
        <div class="col-md-10">
            <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="确认密码"/>
        </div>
    </div>
    <div class="mb-md-4 row">
        <label class="col-md-2 col-form-label" style="text-align: justify;text-align-last: justify">性别</label>
        <div class="col-md-10">
            <label for="sex1" class="col-form-label">
                <input type="radio" id="sex1" name="sex" checked value="男">男
            </label>
            <label for="sex2" class="col-form-label">
                <input type="radio" id="sex2" name="sex" value="女">女
            </label>
        </div>
    </div>
    <div class="mb-md-4 row">
        <label for="email" class="col-md-2 col-form-label"
               style="text-align: justify;text-align-last: justify">邮箱</label>
        <div class="col-md-10">
            <input type="email" id="email" name="email" class="form-control" placeholder="输入邮箱">
        </div>
    </div>
    <div class="mb-md-4 row">
        <label for="phone" class="col-md-2 col-form-label"
               style="text-align: justify;text-align-last: justify">电话</label>
        <div class="col-md-10">
            <input type="text" id="phone" name="phone" class="form-control" placeholder="输入移动电话">
        </div>
    </div>
    <div class="mb-md-4 row">
        <label class="col-md-2 col-form-label" style="text-align: justify;text-align-last: justify">验证码</label>
        <div class="col-md-7">
            <input type="text" name="code" class="form-control">
        </div>
        <div class="col-md-3">
            <button type="button" name="verificationCode" class="btn btn-light"> 获取验证码</button>
        </div>
    </div>
    <div class="mb-md-4 row">
        <label class="col-md-2 col-form-label"></label>
        <div class="col-md-10  d-grid gap-3">
            <button class="btn btn-lg btn-primary btn-block" id="userRegister" type="button">注册</button>
            <button class="btn btn-lg btn-primary btn-block" id="gotoLogin" type="button">返回登录</button>
        </div>
    </div>
</div>

<!--toast-->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

</body>
<script>
    const options = {
        animation: true, // 开启过渡动画
        autohide: true, // 开启自动隐藏
        delay: 2000 // 3000ms后自动隐藏
    };

    $(function () {
        gotoLogin();
        getVerificationCode();
        register();
    });

    function gotoLogin() {
        $("#gotoLogin").click(function () {
            location.href = "/user/login";
        });
    }

    function register() {
        $("#userRegister").click(function () {
            let username = $("[name=username]").val();
            let password = $("[name=password]").val();
            let confirmPassword = $("[name=confirmPassword]").val();
            let sex = $("[name=sex]:checked").val();
            let email = $("[name=email]").val();
            let phone = $("[name=phone]").val();
            let verificationCode = $("[name=code]").val();
            $.post("/user/userRegister", {
                "username": username,
                "password": password,
                "confirmPassword": confirmPassword,
                "sex": sex,
                "email": email,
                "phone": phone,
                "verificationCode": verificationCode
            }, function (data) {
                console.log(data);
                let resData = JSON.parse(data);
                if (resData.resCode == 200) {
                    setTimeout(function () {
                        location.href = "/user/login";
                    }, 1000);
                    $(".toast-body").text(resData.resMsg);
                    getToast($(".toast")).show();
                } else {
                    $(".toast-body").text(resData.resMsg);
                    getToast($(".toast")).show();
                }
            });
        });
    }

    function getVerificationCode() {
        $("[name=verificationCode]").click(function () {
            let username = $("[name=username]").val();
            let password = $("[name=password]").val();
            let confirmPassword = $("[name=confirmPassword]").val();
            let sex = $("[name=sex]:checked").val();
            let email = $("[name=email]").val();
            let phone = $("[name=phone]").val();
            $.post("/user/getVerificationCode", {
                "username": username,
                "password": password,
                "confirmPassword": confirmPassword,
                "email": email,
                "phone": phone
            }, function (data) {
                let resData = JSON.parse(data);
                if (resData.resCode == 200) {
                    $(".toast-body").text(resData.resMsg);
                    getToast($(".toast")).show();
                    let second = 60;
                    let clock = null;
                    clock = setInterval(function () {
                        if (second <= 0) {
                            window.clearInterval(clock);
                            $("button[name=verificationCode]").attr("disabled", false);
                            $("button[name=verificationCode]").text("获取验证码");
                        } else {
                            second--;
                            $("button[name=verificationCode]").attr("disabled", true);
                            $("button[name=verificationCode]").text("获取验证码" + second);
                        }
                    }, 1000);
                } else {
                    $(".toast-body").text(resData.resMsg);
                    getToast($(".toast")).show();
                }
            })
        });
    }

    //初始化toast
    function getToast(element) {
        return new bootstrap.Toast(element, options);
    }
</script>
</html>